<template>
  <!--辅计量单位-->
  <div v-if="editDialogVisible12">
    <el-form label-width="100px" :inline="true" :size="size">
      <!--工具栏-->
      <el-form-item>
        <el-button icon="fa fa-plus" type="primary" @click="handleAdd">选择组合商品</el-button>
      </el-form-item>

      <!--bom商品列表-->
      <el-table :data="productList" border tooltip-effect="dark" style="width: 100%">
        <el-table-column prop="id" label="id" v-if="false"></el-table-column>
        <el-table-column type="index" label="序号" width="50"></el-table-column>
        <el-table-column prop="pictureUrl" label="主图">
          <template slot-scope="scope">
            <img :src="scope.row.pictureUrl" width="40" height="40"/>
          </template>
        </el-table-column>
        <el-table-column prop="chineseName" label="商品名称"></el-table-column>
        <el-table-column prop="code" label="商品编码"></el-table-column>
        <el-table-column prop="unitName" label="主计量单位"></el-table-column>
        <el-table-column prop="bomStock" label="商品库存">
          <template slot-scope="scope">
            <el-input type="number" v-model="scope.row.bomStock"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="brandName" label="商品品牌"></el-table-column>
        <el-table-column prop="fullNamePath" label="商品类目"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <kt-button
              :label="$t('action.save')"
              :size="size"
              type="primary"
              @click="handleEdit(scope.row)"/>
            <kt-button
              icon="fa fa-trash"
              :label="$t('action.delete')"
              :size="size"
              type="danger"
              @click="handleDelete(scope.row)"/>
          </template>
        </el-table-column>
      </el-table>
    </el-form>

    <!--选择商品-->
    <el-dialog title="选择商品" width="80%" top="2vh" :visible.sync="productDialog" :close-on-click-modal="false">
      <el-form label-width="80px" label-position="left" :size="size" :inline="true">
        <el-form-item prop="chineseName" label="商品名称:" style="width: 20%;">
          <el-input v-model="filters.chineseName" placeholder="商品名称" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <kt-button icon="fa fa-search" :label="$t('action.search')" @click="findPage" type="primary"/>
        </el-form-item>
      </el-form>
      <!--表格内容栏-->
      <cy-table
        :height="350"
        :content="pageResult"
        :columns="filterColumns"
        :totalSize="totalSize"
        :showOperation="false"
        :showDeleteOperation="false"
        :showBatchDelete="false"
        @selectionChange="selectionChange"
        @findPage="findPage"
        ref="CyTable"
      ></cy-table>

      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button :size="size" @click.native="handleCancel">{{$t('action.cancel') }}
        </el-button>
        <el-button :size="size" type="primary" @click.native="handleSubmit">{{ $t('action.submit') }}
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import CyTable from '@/views/Core/ProductTable'
import KtButton from '@/views/Core/KtButton'

export default {
  components: {
    KtButton,
    CyTable,
  },

  data() {
    return {
      size: 'small',
      editDialogVisible12: false,
      filters: {
        chineseName: '',
      },
      pageResult: [],
      filterColumns: [
        {prop: 'id', label: '序号', minWidth: 50},
        {prop: 'pictureUrl', label: '主图', minWidth: 100, showImg: true},
        {prop: 'chineseName', label: '商品名称', minWidth: 300},
        {prop: 'code', label: '商品编码', minWidth: 120},
        {prop: 'salePriceWithTax', label: '零售价', minWidth: 80},
        {prop: 'name', label: '商品品牌', minWidth: 120},
        {prop: 'fullNamePath', label: '商品类目', minWidth: 160},
        {prop: 'status', label: '审核状态', minWidth: 80, formatter: this.formatStatus},
        {prop: 'type', label: '商品类型', minWidth: 80, formatter: this.formatType},
      ],
      pageRequest: {pageNum: 1, pageSize: 10},
      totalSize: 0,
      productId: 0,
      productCount: 0,
      productBomList: [],
      productList: [], // 商品列表
      productDialog: false, // 计量单位是否显示
    }
  },

  methods: {
    init(param) {
      this.editDialogVisible12 = param.flag
      this.productId = param.productId
      if (param.flag) {
        this.queryBomProduct()
      }
    },

    // bom查询
    queryBomProduct() {
      let this_ = this
      this_.utils.request.queryBomProduct({productParentId: this.productId}, function (res) {
        if (res.code == '0000') {
          this_.productList = res.data
        } else {
          this_.productList = []
        }
      })
    },

    // bom修改
    handleEdit(obj) {
      let this_ = this
      if (obj.bomStock < 0) {
        this_.$message({message: '请填写商品库存', type: 'error'})
      }
      if (obj.bomStock != null && obj.bomStock != '') {
        this_.utils.request.updateBomProduct(obj, function (res) {
          if (res.code == '0000') {
            this_.$message({message: '操作成功', type: 'success'})
            this_.queryBomProduct()
          } else {
            this_.$message({message: '操作失败,' + res.msg, type: 'error'})
          }
        })
      }
    },

    // bom删除
    handleDelete(obj) {
      this.$confirm('确认删除选中记录吗？', '提示', {
        type: 'warning'
      }).then(() => {
        let this_ = this
        this_.utils.request.deleteBomProduct(obj, function (res) {
          if (res.code == '0000') {
            this_.$message({message: '操作成功', type: 'success'})
            this_.queryBomProduct()
          } else {
            this_.$message({message: '操作失败,' + res.msg, type: 'error'})
          }
        })
      })
    },

    // bom新增
    handleAdd() {
      this.productDialog = true
      this.findPage()
    },

    // bom新增提交
    handleSubmit() {
      let this_ = this
      if (this_.productBomList.length === 0) {
        this_.$message({message: '请先选择商品', type: 'error'})
        return
      }
      let params = {}
      let productIds = []
      this_.productBomList.forEach(item => productIds.push(item.id))
      params.productIds = productIds
      params.productParentId = this.productId
      this_.utils.request.addBomProduct(params, function (res) {
        if (res.code === '0000') {
          this_.$message({message: '操作成功', type: 'success'})
          this_.productDialog = false
          this_.queryBomProduct()
        } else {
          this_.$message({message: '操作失败,' + res.msg, type: 'error'})
        }
      })
    },

    handleCancel() {
      this.productDialog = false
      this.filters = {}
    },

    // 查询商品
    findPage(params) {
      let this_ = this
      if (params == undefined || params == null) {
        params = {
          pageNum: this_.pageRequest.pageNum,
          pageSize: this_.pageRequest.pageSize
        }
      }
      if (this_.filters == undefined || this_.filters == null) {
        this_.filters = {}
      }
      this_.filters.start = params.pageNum
      this_.filters.limit = params.pageSize
      this_.filters.types = [1,2]
      this.utils.request.queryPageProductManagement(this_.filters, function (res) {
        if (res.code == '0000') {
          this_.pageResult = res.data.rows
          this_.totalSize = Number(res.data.total)
        } else {
          res.data.rows = []
        }
      })
    },

    selectionChange(val) {
      this.productBomList = val.selections
      this.productCount = val.selections.length
    },

    // format
    formatStatus: function (row, column, cellValue) {
      if (cellValue == 0) {
        return '预审核'
      } else if (cellValue == 1) {
        return '待审核'
      } else if (cellValue == 2) {
        return '审核通过'
      } else if (cellValue == 3) {
        return '审核不通过'
      }
    },
    formatType: function (row, column, cellValue) {
      if (cellValue === 1) {
        return '实体商品'
      } else if (cellValue === 2) {
        return '虚拟商品'
      } else if (cellValue === 3) {
        return '虚拟组合'
      } else if (cellValue === 4) {
        return '实物组合'
      }
    },
  }
}
</script>

<style scoped>

</style>
